<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>audio</title>
    <link rel="stylesheet" href="../common/style/reset.css" />
    <link rel="stylesheet" href="../common/style/xiaolai.css">
    <style>


      .view{ 
        width: 100%;
        height: 100%;
        font-family:'Xiaolai SC';
        /* background-color: rgba(255, 255, 255, 0.01); */
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 16px;
      }

      .view:hover{
        background-color: rgba(255, 255, 255, 0.01)
      }

     


    </style>
  </head>
  <body>
    <div class="view">
      <canvas ></canvas>
    </div>
  </body>
  <script type="module" src="../common/js/setting.js"></script>
  <script type="module" src="../common/js/menu.js"></script>
  <script type="module" src="../common/js/move.js"></script>
  <script type="module" src="../common/js/counter.js"></script>
  <script type="module" async >
    import { debounce } from '../common/utils/utils.js'
    import { initSource} from '../common/utils/audio.js'
    import IconSvg from '../components/IconSvg/IconSvg.js'
    customElements.define('icon-svg', IconSvg);

    let data;
    const info = {
      WIDTH: '',
      HEIGHT: '',
      interval: 4,
      pillarWidth: 5,
      pillarBlock: 3
    };



    let Dots = [];
    let { source, audioCtx } = await initSource();
    let analyser = audioCtx.createAnalyser(); 
    source.connect(analyser)
    analyser.fftSize = 2048 / 2;
    analyser.smoothingTimeConstant = 0.85;
    // analyser.maxDecibels = 110;
    // analyser.minDecibels = -100;
    let bufferLength = analyser.frequencyBinCount;
    let dataArray = new Uint8Array(bufferLength);
    const view = document.querySelector('.view');
    const canvas = document.querySelector('canvas');
    let ctx = canvas.getContext('2d');

    const resizeDots = () => {
      let length = Math.ceil(bufferLength / 6 - 20);
      Dots = Array(length).fill(info.HEIGHT);
    }

    const canvasSize = () => {
      const WIDTH = view.clientWidth;
      const HEIGHT = view.clientHeight;
      canvas.width = WIDTH;
      canvas.height = HEIGHT;
      info.WIDTH = WIDTH;
      info.HEIGHT = HEIGHT;
      resizeDots();
    }
    canvasSize();


    const draw = () => {
      requestAnimationFrame(draw);
      analyser.getByteFrequencyData(dataArray);
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      let centerX = canvas.width / 2;
      let centerY = canvas.height;
      let left = 0;
      let newDataArray = dataArray.filter((item,index) => index % 6 === 0 ).slice(0, -20);
      left = info.pillarWidth * newDataArray.length + info.interval * newDataArray.length;

      left = (info.WIDTH - left) / 2;
      for(let i = 0; i < newDataArray.length; i++){
        let itemHeight =  newDataArray[i] / 1.5;
        let x = i * info.pillarWidth + info.interval * i + (info.interval / 2) + centerX;
        let y = (centerY - itemHeight);

        ctx.fillRect(x, y, info.pillarWidth, itemHeight);
        ctx.fillRect(x, Dots[i] ? Dots[i] : y - info.pillarBlock, info.pillarWidth, info.pillarBlock );
        if(Dots[i] && Dots[i] !== 0){
         Dots[i]++;
        }
        if(Dots[i] >= (y - info.pillarBlock) || Dots[i] === undefined){ 
          Dots[i] = y - (info.pillarBlock + 1);
        }

      }

      for(let i = 0; i < newDataArray.length; i++){
        let itemHeight =  newDataArray[i] / 1.5;
        let x = centerX - (i * info.pillarWidth + info.interval * i + info.pillarWidth + (info.interval / 2));
        let y = (centerY - itemHeight);

        ctx.fillRect(x, y, info.pillarWidth, itemHeight);
        ctx.fillRect(x, Dots[i] ? Dots[i] : y - info.pillarBlock, info.pillarWidth, info.pillarBlock );
        if(Dots[i] && Dots[i] !== 0){
         Dots[i]++;
        }
        if(Dots[i] >= (y - info.pillarBlock) || Dots[i] === undefined){ 
          Dots[i] = y - (info.pillarBlock + 1);
        }
      }

      let gradient = ctx.createLinearGradient(0, 0, 0, info.HEIGHT);
      gradient.addColorStop(0, '#9b23ea');
      gradient.addColorStop(0.5, '#7d4bd4');
      gradient.addColorStop(1, '#5f72bd');
      // background-image: linear-gradient(to top, #5f72bd 0%, #9b23ea 100%); #7d4bd4
      ctx.fillStyle = gradient;

      // ctx.fillStyle = "rgba(255, 255, 255, 0.7)";

    }


    draw()

    window.addEventListener("resize", debounce(canvasSize, 1000));




    window.getData = ()=>data;


  </script>
</html>
